import { getNoticeList } from '@/servers/api/base';
import { FormattedMessage, useIntl } from '@umijs/max';
import { Button, Form, Modal, Space, Table, Typography } from 'antd';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';

const SystemNotification: React.FC = () => {
    const intl = useIntl();
    const [form] = Form.useForm();
    const [dataSource, setdataSource] = useState([]); //表格
    const [isModalOpen, setisModalOpen] = useState(false);
    const [con, setCon] = useState('');
    const [title, setTitle] = useState('');
    //详情
    function details(row) {
        setisModalOpen(true);
        setCon(row.con);
        setTitle(row[intl.formatMessage({ id: 'item.title' })]);
    }
    const columns = [
        {
            title: <FormattedMessage id="标题"></FormattedMessage>,
            key: 'title',
            width: 300,
            ellipsis: true,
            render: (text, record) => (
                <>{record[intl.formatMessage({ id: 'item.title' })]}</>
            ),
        },
        {
            title: <FormattedMessage id="内容"></FormattedMessage>,
            key: 'con',
            ellipsis: true,
            render: (text, record) => (
                <>{record[intl.formatMessage({ id: 'item.con' })]}</>
            ),
        },
        {
            title: <FormattedMessage id="发布时间"></FormattedMessage>,
            key: 'createtime',
            width: 200,
            ellipsis: true,
            render: (text, record) => (
                <>
                    {dayjs(record.createtime * 1000).format(
                        'YYYY-MM-DD HH:mm:ss',
                    )}
                </>
            ),
        },
        {
            title: <FormattedMessage id="操作"></FormattedMessage>,
            key: 'action',
            width: 200,
            render: (text, record) => (
                <Space size="middle">
                    <Button
                        type="primary"
                        ghost
                        size="small"
                        onClick={() => {
                            details(record);
                        }}
                    >
                        <FormattedMessage id="查看详情"></FormattedMessage>
                    </Button>
                </Space>
            ),
        },
    ];
    const [tableparams, settableparams] = useState({
        page: 1,
        size: 10,
        searchKey: '',
        type: 'system',
    });
    function goodsList(params: any) {
        const qParams = {
            ...params,
        };
        getNoticeList({ ...qParams }).then((res) => {
            settableparams(params);
            setdataSource(res.data);
        });
    }
    useEffect(() => {
        (async () => {
            goodsList({ ...tableparams });
        })();
    }, []);
    return (
        <>
            <Table dataSource={dataSource} rowKey="id" columns={columns} />
            <Modal
                title={intl.formatMessage({ id: '内容' })}
                open={isModalOpen}
                onCancel={() => {
                    setisModalOpen(false);
                }}
                cancelText={intl.formatMessage({ id: '关闭' })}
                okButtonProps={{ style: { display: 'none' } }}
            >
                <Typography.Title level={5} style={{textAlign:"center"}}>{title}</Typography.Title>
                {con}
            </Modal>
        </>
    );
};
export default SystemNotification;
